<!--
  Copyright (c) chb my copyright message. 2022-2023. All rights reserved.

  -->

<template>
  <div>
    <!--  顶部标签  -->
    <van-nav-bar :title="cat">
      <template #left>
        <van-icon name="zuojiantou" class-prefix="iconfont" size="28px" @click="$router.back()"></van-icon>
      </template>
    </van-nav-bar>
    <div style="display: flex;flex-wrap: wrap">
      <div v-for="(item,index) in playlists" :key="index"
           @click="$router.push({name:'playlistDetail',query:{id:item.id}})"
           style="width: 120px;margin: 5px 2px 5px 2px;">
        <div style="position: absolute;margin-left: 50px;margin-top: 5px;">
          <van-tag color="#494949" style="border-radius: 3px;padding: 1px 5px">
            <van-icon name="bofang" class-prefix="iconfont" :size="1">
              {{ item.trackCount }}万
            </van-icon>
          </van-tag>
        </div>
        <img :src="item.coverImgUrl" style="width: 110px;height: 110px;border-radius: 15px">
        <div
          style="-webkit-line-clamp: 2;display: -webkit-box;overflow: hidden;text-overflow: ellipsis;-webkit-box-orient: vertical">
          {{ item.name }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {getTopPlayListHighqualityTags} from "../../api/playlist";

export default {
  name: "topPlayList",
  data() {
    return {
      cat: this.$route.query.cat,
      playlists: []
    }
  },
  created() {
    getTopPlayListHighqualityTags(this.cat).then(res => {
      console.log(res)
      this.playlists = res.data.playlists
    })
  }
}
</script>

<style scoped>

</style>
